<template>
  <navigator
    :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
    class="composite_item"
  >
    <!-- 商品图片容器 -->
    <view class="goods_img">
      <u-image
        width="200rpx"
        height="200rpx"
        :src="item.goods_small_logo"
      ></u-image>
    </view>
    <!-- 商品信息 -->
    <view class="goods_info">
      <view class="goods_name u-line-2">{{item.goods_name}}</view>
      <view class="goods_price">￥{{item.goods_price || 9999}}</view>
    </view>
  </navigator>
</template>

<script>
export default {
  props: ["item"],
};
</script>

<style lang="scss">
.composite_item {
  display: flex;
  // border-top: 1rpx solid #ccc;
  padding: 10rpx 0;
  .goods_img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .goods_info {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .goods_name {
      font-size: 30rpx;
      color: #333;
    }

    .goods_price {
      font-size: 30rpx;
      color: #eb4450;
    }
  }
}
</style>